<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 600px;
				margin: 0 auto;
				padding: 20px;
				background-color: bisque;
				text-align: center;
			}
			#box>div{
				margin: 20px;
			}
			table{
				width: 600px;
				height: 50px;
				table-layout: fixed;
				text-align: center;
				margin-top: 10px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="d1">
				姓名：<input type="text" name="" id="name" value="" />
			</div>
			<div class="d2">
				密码：<input type="password" name="" id="password" value="" />
			</div>
			<div class="d3">
				性别：
				<input type="radio" name="sex"  value="1" />男
				<input type="radio" name="sex"  value="2" />女
			</div>
			<button type="button" class="btn">提交</button>
			<table border="1" cellspacing="0" cellpadding="0">
				<thead>
					<tr>
						<th>姓名</th>
						<th>密码</th>
						<th>性别</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<!-- <tr>
						<th>${arr[i].name}</th>
						<th>${arr[i].password}</th>
						<th>${arr[i].sex}</th>
						<th>
							<button type="button" onclick="move(${arr[i].id},this)">上移</button>
							<button type="button" onclick="del(${arr[i].id})">删除</button>
							<button type="button" onclick="xg(${arr[i].id},this)">修改</button>
							<button type="button" onclick="move(${arr[i].id},this)">下移</button>
						</th>
					</tr> -->
				</tbody>
			</table>
		</div>
	</body>
	<script type="text/javascript">
		var user=document.querySelector("#name");
		var password=document.querySelector("#password");
		var sexs = document.querySelectorAll(".d3>input[type='radio']");
		var btn=document.querySelector(".btn");
		var tbody=document.querySelector("table>tbody")
		
		if (localStorage.arrList) {
			var arr = JSON.parse(localStorage.arrList)
		} else{
			var arr = []
			localStorage.arrList = JSON.stringify(arr)
		}
		
		/* 点击添加 */
		btn.onclick=function(){
			var obj = {
				user:user.value,
				password:password.value,
				sex:getsexV(),
				id:+new Date()
			}
			arr.push(obj)
			localStorage.arrList = JSON.stringify(arr)
			show(arr)
			user.value = password.value=""
		}
		
		/* 获取性别 */
		function getsexV(){
			for(var i=0;i<sexs.length;i++){
				if(sexs[i].checked){
					return sexs[i].value;
				}
			}
		}
		function getsexFn(value){
			return value == "1"?"男":"女"
		}
		/* 渲染 */
		function show(arr){
			tbody.innerHTML=""
			for(var i=0;i<arr.length;i++){
				tbody.innerHTML+=`
				    <tr>
				    	<th>${arr[i].user}</th>
				    	<th>${arr[i].password}</th>
				    	<th>${getsexFn(arr[i].sex)}</th>
				    	<th>
						    <button type="button" onclick="move(${arr[i].id},this)">上移</button>
				    		<button type="button" onclick="del(${arr[i].id})">删除</button>
				    		<button type="button" onclick="xg(${arr[i].id},this)">修改</button>
						    <button type="button" onclick="move(${arr[i].id},this)">下移</button>
				    	</th>
				    </tr>
				`;
			}
		}
		/* 删除数据 */
		function del(id){
			for(var i=0;i<arr.length;i++){
				if(arr[i].id==id){
					arr.splice(i,1)
				}
			}
			localStorage.arrList=JSON.stringify(arr);
			show(arr)
		}
		/* 修改数据 */
		function xg(id,t){
			if(t.innerHTML == "修改"){
				t.innerHTML = "完成";
				for(var i=0;i<arr.length;i++){
					if(arr[i].id==id){
						user.value=arr[i].user;
						password.value=arr[i].password;
					}
			}else{
						t.innerHTML="修改";
						arr[i].user = user.value;
						arr[i].password = password.value;
					}
				}
			    localStorage.arrList=JSON.stringify(arr);
			    show(arr)
		}
	</script>
</html>
